<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" Click the '...' button to display the calendar. The calendar lets you set times at 15 minutes intervals. You can set the time interval to other numbers using the timeInterval option. In the calendar, select the date with a single click. ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Calendar Widget - Time Interval Calendar</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../../zapatec/utils/zapatec.js'></script>

	<!-- Custom includes -->	
		<!-- import the calendar script -->
		<script type="text/javascript" src="../../../zapatec/zpcal/src/calendar.js"></script>

		<!-- import the language module -->
		<script type="text/javascript" src="../../../zapatec/zpcal/lang/calendar-en.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->


	<!-- ALL demos need these css -->
	<link href="../../../zapatec/website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../../zapatec/website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>

	<!-- Theme css -->
	<link href="../../../zapatec/zpcal/themes/fancyblue.css" rel="stylesheet" type="text/css">

	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Time Interval Calendar</div>

		<div class='zpCalDemoText'>
		<ul>
		<li>This demo uses the <b>fancyblue theme</b>.</li>
		
		<li>Click the '...' button to display the calendar.</li>
		<li>The calendar lets you set times at 15 minutes intervals.</li>
		<li>You can set the time interval to other numbers using the timeInterval option.</li>
		<li>In the calendar, select the date with a <strong>single click</strong>.</li>
	</ol>

		</ul>
		</div>



<b>Date :</b> 
<input type="text" name="date1" id="sel1" size="30" >
<input type="reset" value=" ... " id='button1' title='Click to pop up calendar'>

		<script type="text/javascript">
		var cal = new Zapatec.Calendar.setup({
		
		inputField     :    "sel1",     // id of the input field
		ifFormat       :    "%Y/%m/%d  [%I:%M %p]",     // format of the input field
		button         :    "button1",  // What will trigger the popup of the calendar
		timeInterval   :     15,
		showsTime      :     true

		});
		
	</script>


	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Calendar Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>      
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>
